<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="flat-button">
    <template>
        <style>
            flat-button {
                display: inline-block;
            }

            flat-button>* {
                height: 50px;
                width: 100%;
                display: inline-block;
                border: 1px solid #202020;
                background-color: transparent;
                font-size: 1rem;
                font-weight: 600;
                margin: 0;
                padding: 1rem 3rem;
                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
                border-radius: 5px;
                color: #202020;
            }

            flat-button>*:focus {
                color: #202020;
            }

            flat-button>*:active {
                background-color: #202020;
                color: #FFFFFF;
            }

            flat-button>*:hover {
                background-color: #202020;
                color: #FFFFFF;
                cursor: pointer;
            }

            flat-button>*:visited:hover {
                color: #FFFFFF;
            }

            flat-button>*:visited {
                color: #202020;
            }

            flat-button.iron-selected>button {
                background-color: #202020;
                color: #FFFFFF;
            }

            flat-button>*:disabled {
                border: 1px solid #a8a8a8;
                background: #eaeaea;
                color: #a8a8a8;
                cursor: not-allowed;
            }

            flat-button>button[disabled]:hover {
                cursor: not-allowed;
            }
        </style>
        <slot></slot>
    </template>
    <script>
        /**
         * `flat-button` Description
         *
         * @summary Button of FlatElements
         * @customElement
         * @polymer
         * @extends Polymer.Element
         */
        class FlatButton extends Polymer.Element {
            static get is() {
                return 'flat-button';
            }
        }
        window.customElements.define(FlatButton.is, FlatButton);
    </script>
</dom-module>